import React from "react";
import { ChartProps } from "../interface";
import ReactECharts, { EChartsOption } from "echarts-for-react";

export interface BaseChartProps extends ChartProps {
  option: EChartsOption;
}

const BaseChart: React.FC<BaseChartProps> = ({
  height = "100%",
  width = "100%",
  className,
  style,
  theme,
  option,
  onReady,
  onEvents,
  loading = false,
  loadingOption,
}) => {
  return (
    <ReactECharts
      notMerge={true}
      lazyUpdate={true}
      className={className}
      style={{ ...style, height, width }}
      theme={theme}
      option={option}
      onChartReady={onReady}
      onEvents={onEvents}
      showLoading={loading}
      loadingOption={loadingOption}
    />
  );
};

BaseChart.displayName = "BaseChart";

export default BaseChart;
